<template>
  <div class="addTheArticle">
    <el-form
      ref="addActivelref"
      :model="addArticleform"
      label-width="80px"
      :rules="addArticlerules"
    >
      <!-- 文章标题 -->
      <el-form-item label="文章标题" prop="title">
        <el-input v-model="addArticleform.title"></el-input>
      </el-form-item>
      <!-- 文章内容 -->
      <el-form-item label="文章内容" prop="articleBody">
        <quill-editor
          ref="myQuillEditor"
          v-model="addArticleform.articleBody"
          :options="editorOption"
          @blur="onEditorBlur"
        />
      </el-form-item>
      <!-- 视频地址 -->
      <el-form-item label="视频地址">
        <el-input v-model="addArticleform.videoURL"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="$emit('colse')">取消</el-button>
        <el-button type="primary" @click="addArticleData">确定</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { quillEditor } from 'vue-quill-editor'
export default {
  name: 'addArticle',
  props: {},
  components: {
    quillEditor
  },
  data() {
    return {
      addArticleform: {
        title: '',
        articleBody: '',
        videoURL: null
      },
      editorOption: {}, // 富文本配置对象
      addArticlerules: {
        title: [{ required: true, message: '请输入文章标题', trigger: 'blur' }],
        articleBody: [
          { required: true, message: '请输入文章内容', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {},
  watch: {},
  methods: {
    /** 失去焦点 **/
    onEditorBlur() {
      if (this.addArticleform.articleBody === '') {
        return this.$message('请输入文章内容')
      }
    },
    // 点击确定
    addArticleData() {
      // 表单校验
      this.$refs.addActivelref.validate((boolean) => {
        if (!boolean) return
        // 传递需要添加的添加数据
        this.$emit('addArtDate', this.addArticleform)
        // 进行表单重置
        this.$refs.addActivelref.resetFields()
      })
    }
  },
  created() {},
  mounted() {}
}
</script>
<style lang="less" scoped>
/deep/.ql-editor {
  height: 100px;
}
</style>
